<html lang="zh-CN">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   帮助中心 - AI问答管理系统
  </title>
  <script src="https://res.gemcoder.com/js/reload.js">
  </script>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <script>
   tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
        secondary: '#10B981',
        accent: '#F59E0B',
        danger: '#EF4444',
        dark: '#1E293B',
        light: '#F8FAFC',
        muted: '#94A3B8'
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      },
      boxShadow: {
        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
        'hover': '0 10px 30px rgba(0, 0, 0, 0.12)'
      }
    }
  }
};
  </script>
  <style type="text/tailwindcss">
   @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
            .sidebar-item.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .sidebar-item:hover:not(.active) {
                @apply bg-gray-100;
            }
            .card {
                @apply bg-white rounded-xl shadow-card p-5 transition-all duration-300 hover:shadow-hover;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
            .btn-outline {
                @apply border border-gray-300 hover:bg-gray-50;
            }
            .input-field {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .faq-item {
                @apply border border-gray-100 rounded-lg overflow-hidden transition-all duration-300 hover:border-primary/30;
            }
            .faq-question {
                @apply flex items-center justify-between p-4 cursor-pointer;
            }
            .faq-answer {
                @apply px-4 pb-4 text-gray-600 hidden;
            }
            .faq-answer.show {
                @apply block;
            }
        }
  </style>
 </head>
 <body class="bg-gray-50 font-sans text-dark">
  <div class="flex h-screen overflow-hidden">
   <!-- 侧边栏 -->
   <aside class="w-64 bg-white shadow-lg z-10 transition-all duration-300 ease-in-out" id="sidebar">
    <div class="flex items-center justify-between p-5 border-b">
     <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white" style="background-color:#4a90e2ff;">
       <i class="fas fa-robot text-xl">
       </i>
      </div>
      <h1 class="text-xl font-bold">
       AI问答管理系统
      </h1>
     </div>
     <button class="lg:hidden text-gray-500 hover:text-primary" id="toggleSidebar">
     </button>
    </div>
    <nav class="p-4">
     <div class="mb-6">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">
       主导航
      </p>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-tachometer-alt w-5 text-center">
       </i>
       <span>
        仪表盘
       </span>
      </a>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-file-alt w-5 text-center">
       </i>
       <span>
        文档管理
       </span>
      </a>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-history w-5 text-center">
       </i>
       <span>
        历史对话
       </span>
      </a>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-users w-5 text-center">
       </i>
       <span>
        用户管理
       </span>
      </a>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-lock w-5 text-center">
       </i>
       <span>
        权限管理
       </span>
      </a>
     </div>
     <div class="mb-6">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">
       系统
      </p>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-cog w-5 text-center">
       </i>
       <span>
        系统设置
       </span>
      </a>
      <a class="sidebar-item active" href="javascript:void(0);" style="background-color: rgba(59, 130, 246, 0.1); color: #3b82f6;">
       <i class="fas fa-question-circle w-5 text-center" style="color: #3b82f6;">
       </i>
       <span>
        帮助中心
       </span>
      </a>
     </div>
     <div class="mt-8 p-4 bg-blue-50 rounded-xl" style="background-color:rgba(59, 130, 246, 0.05)">
      <div class="flex items-center gap-3 mb-3">
       <i class="fas fa-lightbulb text-blue-600 text-xl">
       </i>
       <h3 class="font-medium">
        AI能力配置
       </h3>
      </div>
      <p class="text-sm text-gray-600 mb-4">
       调整AI模型参数和RAG配置以优化问答效果
      </p>
      <a class="btn bg-blue-600 text-white hover:bg-blue-700 w-full justify-center" href="javascript:void(0);">
       <i class="fas fa-sliders-h">
       </i>
       <span>
        配置模型
       </span>
      </a>
     </div>
    </nav>
   </aside>
   <!-- 主内容区 -->
   <div class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航 -->
    <header class="h-16 bg-white shadow-sm flex items-center justify-between px-6 z-10">
     <div class="flex items-center gap-4">
      <button class="lg:hidden text-gray-500 hover:text-primary" id="mobileSidebarToggle">
      </button>
     </div>
     <div class="flex items-center gap-6">
      <button class="relative text-gray-500 hover:text-primary transition-colors">
       <i class="fas fa-bell text-xl">
       </i>
       <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">
        3
       </span>
      </button>
      <button class="relative text-gray-500 hover:text-primary transition-colors">
       <i class="fas fa-envelope text-xl">
       </i>
       <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">
        5
       </span>
      </button>
      <div class="flex items-center gap-3 cursor-pointer group">
       <img alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png"/>
       <div class="hidden md:block">
        <p class="font-medium">
         管理员
        </p>
        <p class="text-xs text-gray-500">
         系统管理员
        </p>
       </div>
       <i class="fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors">
       </i>
      </div>
     </div>
    </header>
    <!-- 页面内容 -->
    <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
     <div class="max-w-5xl mx-auto">
      <!-- 页面标题 -->
      <div class="mb-8">
       <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold" style="left:-10px;position:relative">
        帮助中心
       </h1>
       <p class="text-gray-500 mt-1" style="left:-4px;position:relative">
        获取系统使用帮助和常见问题解答
       </p>
      </div>
      <!-- 搜索框 -->
      <div class="bg-white rounded-xl p-6 shadow-md mb-8" data-selectorname="#id-8o4jf" style="left:-9px;position:relative">
       <div class="flex flex-col md:flex-row gap-4 items-center">
        <div class="relative w-full md:w-3/4">
         <input class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 text-lg" placeholder="搜索帮助文档、常见问题..." type="text"/>
         <i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-xl">
         </i>
        </div>
<button class="btn-primary w-full md:w-auto bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white font-medium py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
         <i class="fas fa-search mr-2">
         </i>
         搜索
        </button>
       </div>
      </div>
     </div>
     <!-- 帮助模块 -->
     <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
      <!-- 文档管理 -->
      <div class="card flex flex-col items-center text-center p-6">
       <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center text-primary mb-4">
        <i class="fas fa-file-alt text-2xl">
        </i>
       </div>
       <h3 class="text-lg font-semibold mb-2">
        文档管理
       </h3>
       <p class="text-gray-600 text-sm mb-4">
        了解如何上传、管理和设置文档权限
       </p>
       <a class="text-primary hover:underline text-sm font-medium" href="javascript:void(0);">
        查看文档
        <i class="fas fa-arrow-right ml-1">
        </i>
       </a>
      </div>
      <!-- 用户管理 -->
      <div class="card flex flex-col items-center text-center p-6">
       <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center text-secondary mb-4">
        <i class="fas fa-users text-2xl">
        </i>
       </div>
       <h3 class="text-lg font-semibold mb-2">
        用户管理
       </h3>
       <p class="text-gray-600 text-sm mb-4">
        学习如何管理用户账户、权限和角色
       </p>
       <a class="text-secondary hover:underline text-sm font-medium" href="javascript:void(0);">
        查看文档
        <i class="fas fa-arrow-right ml-1">
        </i>
       </a>
      </div>
      <!-- 系统设置 -->
      <div class="card flex flex-col items-center text-center p-6">
       <div class="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mb-4">
        <i class="fas fa-cog text-2xl">
        </i>
       </div>
       <h3 class="text-lg font-semibold mb-2">
        系统设置
       </h3>
       <p class="text-gray-600 text-sm mb-4">
        了解系统配置选项和高级功能设置
       </p>
       <a class="text-purple-600 hover:underline text-sm font-medium" href="javascript:void(0);">
        查看文档
        <i class="fas fa-arrow-right ml-1">
        </i>
       </a>
      </div>
     </div>
     <!-- 热门问题 -->
     <div class="mb-10 card">
      <h2 class="text-xl font-semibold mb-6">
       热门问题
      </h2>
      <div class="space-y-4">
       <!-- 问题1 -->
       <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
         <h3 class="font-medium">
          如何批量上传文档？
         </h3>
         <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300">
         </i>
        </div>
        <div class="faq-answer">
         <p>
          您可以通过以下步骤批量上传文档：
         </p>
         <ol class="list-decimal pl-5 mt-2 space-y-1 text-sm">
          <li>
           进入"文档管理"页面
          </li>
          <li>
           点击右上角的"批量导入"按钮
          </li>
          <li>
           在弹出的对话框中选择"批量上传"
          </li>
          <li>
           选择多个文档文件或拖拽文件到上传区域
          </li>
          <li>
           设置文档的访问权限和分类
          </li>
          <li>
           点击"开始上传"按钮完成批量上传
          </li>
         </ol>
         <p class="mt-2 text-sm">
          支持的文件格式包括：PDF、DOCX、TXT、PPTX等常见文档格式。单次最多可上传20个文件，总大小不超过100MB。
         </p>
        </div>
       </div>
       <!-- 问题2 -->
       <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
         <h3 class="font-medium">
          如何查看用户的对话记录？
         </h3>
         <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300">
         </i>
        </div>
        <div class="faq-answer">
         <p>
          管理员可以通过以下步骤查看用户的对话记录：
         </p>
         <ol class="list-decimal pl-5 mt-2 space-y-1 text-sm">
          <li>
           进入"用户管理"页面
          </li>
          <li>
           选择需要查看的用户
          </li>
          <li>
           点击用户详情页中的"对话记录"选项卡
          </li>
          <li>
           您可以按时间范围筛选对话记录
          </li>
          <li>
           点击具体对话可查看完整的问答内容
          </li>
         </ol>
         <p class="mt-2 text-sm">
          注意：只有管理员角色可以查看所有用户的对话记录，普通用户只能查看自己的对话历史。
         </p>
        </div>
       </div>
       <!-- 问题3 -->
       <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
         <h3 class="font-medium">
          如何设置文档的访问权限？
         </h3>
         <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300">
         </i>
        </div>
        <div class="faq-answer">
         <p>
          您可以为每个文档设置不同的访问权限：
         </p>
         <ol class="list-decimal pl-5 mt-2 space-y-1 text-sm">
          <li>
           上传文档时或在文档详情页点击"权限设置"
          </li>
          <li>
           选择以下权限级别之一：
           <ul class="list-disc pl-5 mt-1">
            <li>
             公开：所有用户可见
            </li>
            <li>
             仅团队可见：仅内部团队成员可见
            </li>
            <li>
             仅指定用户可见：仅选定用户可见
            </li>
            <li>
             私有：仅上传者和管理员可见
            </li>
           </ul>
          </li>
          <li>
           如果选择"仅指定用户可见"，请选择允许访问的用户或用户组
          </li>
          <li>
           点击"保存"应用权限设置
          </li>
         </ol>
        </div>
       </div>
       <!-- 问题4 -->
       <div class="faq-item">
        <div class="faq-question" onclick="toggleFaq(this)">
         <h3 class="font-medium">
          如何监控文档的向量化处理状态？
         </h3>
         <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300">
         </i>
        </div>
        <div class="faq-answer">
         <p>
          监控文档向量化处理状态的方法：
         </p>
         <ol class="list-decimal pl-5 mt-2 space-y-1 text-sm">
          <li>
           进入"文档管理"页面
          </li>
          <li>
           点击"处理状态"选项卡
          </li>
          <li>
           您可以查看所有文档的处理状态，包括：
           <ul class="list-disc pl-5 mt-1">
            <li>
             待处理：文档已上传，等待处理
            </li>
            <li>
             处理中：文档正在进行向量化处理
            </li>
            <li>
             已完成：文档处理成功并可用于问答
            </li>
            <li>
             处理失败：文档处理出错，需要重新上传
            </li>
           </ul>
          </li>
          <li>
           对于处理失败的文档，可以查看失败原因并重新上传
          </li>
         </ol>
         <p class="mt-2 text-sm">
          通常情况下，一个文档的向量化处理时间在几秒到几分钟之间，具体取决于文档大小和系统负载。
         </p>
        </div>
       </div>
      </div>
     </div>
     <!-- 底部帮助选项 -->
     <div class="card mt-auto">
      <div class="text-center mb-6">
       <p class="text-gray-600 mb-4">
        如果您在使用过程中遇到问题或有功能建议，请联系我们的支持团队。
       </p>
       <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a class="btn btn-primary justify-center" href="javascript:void(0);">
         <i class="fas fa-paper-plane">
         </i>
         <span>
          发送支持请求
         </span>
        </a>
        <a class="btn btn-outline justify-center" href="javascript:void(0);">
         <i class="fas fa-phone-alt">
         </i>
         <span>
          联系客服
         </span>
        </a>
       </div>
      </div>
     </div>
    </main>
   </div>
  </div>
  <!-- JavaScript -->
  <script>
   // 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  // 侧边栏切换
  var sidebar = document.getElementById('sidebar');
  var toggleSidebar = document.getElementById('toggleSidebar');
  var mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
  function toggleSidebarVisibility() {
    sidebar.classList.toggle('-translate-x-full');
  }
  if (toggleSidebar) toggleSidebar.addEventListener('click', toggleSidebarVisibility);
  if (mobileSidebarToggle) mobileSidebarToggle.addEventListener('click', toggleSidebarVisibility);

  // 默认展开第一个FAQ
  var firstFaq = document.querySelector('.faq-question');
  if (firstFaq) toggleFaq(firstFaq);
});

// FAQ切换函数
function toggleFaq(element) {
  var answer = element.nextElementSibling;
  var icon = element.querySelector('i');
  answer.classList.toggle('show');
  icon.classList.toggle('rotate-180');
}
  </script>
 </body>
</html>
